<template>
  <div>
    <el-row :gutter="70">
      <el-col :span="8">
        <tree @node_click="nodeClick"></tree>
      </el-col>
      <el-col :span="15">
        <div>
          <el-input
            v-model="input"
            placeholder="请输入查询参数"
            class="searchInput"
          ></el-input>
          <el-button
            icon="el-icon-search"
            style="font-size: 16px;"
            @click="handleSearch"
          ></el-button>
          <el-button
            class="addButton"
            @click="handleEdit"
            icon="el-icon-circle-plus"
          ></el-button>
          <el-button
            class="delButton"
            v-if="multipleSelectionFlag"
            @click="batchRemoveBrand"
            icon="el-icon-delete"
          >
          </el-button>
          <el-table
            ref="attrGroup"
            :data="attrGroup"
            :stripe="true"
            :highlight-current-row="true"
            @selection-change="attrGroupSelectionChange"
            tooltip-effect="dark"
            class="table"
          >
            <el-table-column
              type="selection"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="组id"
              width="80"
            >
              <template slot-scope="scope">{{ scope.row.attrGroupId }}</template>
            </el-table-column>
            <el-table-column
              prop="attrGroupName"
              label="组名"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="descript"
              label="介绍"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              width="50"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="icon"
              label="图标"
              width="80"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="catelogNames"
              label="所属分类"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="attrAndAttrgroupAssociation(scope.$index, scope.row)"
                >关联</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                ><i class="el-icon-edit"></i></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹窗, 新增 / 修改 -->
          <add-or-update
            v-if="addOrUpdateShow"
            ref="addOrUpdate"
            @refreshDataList="getDataList"
          ></add-or-update>
          <attr-and-attrgroup-association
            v-if="isShow"
            ref="association"
          >
          </attr-and-attrgroup-association>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 40, 80]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import tree from '@/components/tree/index.vue'
import AddOrUpdate from './attrgroupDialog.vue'
import attrAndAttrgroupAssociation from './attrAndAttrgroupAssociation.vue'
export default {
  data () {
    return {
      input: '', // 搜索框数据
      multipleSelection: [], // 保存勾选数据
      multipleSelectionFlag: false,
      addOrUpdateShow: false, // 控制添加还是修改
      currentPage: 1, // 当前页
      pageSize: 10, // 每页的条数
      total: 0, // 总条数
      attrGroup: [],
      catId: 0,
      isShow: false
    }
  },
  methods: {
    // 属性分组和属性的关联关系
    attrAndAttrgroupAssociation (index, row) {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.association.init(index, row)
      })
    },
    // 查询
    handleSearch () {
      if (this.input === '') {
        this.catId = 0
      }
      this.getAttrGroupPageList(this.pageSize, this.currentPage, this.input)
    },
    // 添加、修改
    handleEdit (index, row) {
      this.addOrUpdateShow = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(index, row)
      })
    },
    // 当表格选择项发生变化时会触发该事件
    attrGroupSelectionChange (val) {
      this.multipleSelectionFlag = true
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.multipleSelectionFlag = false
      }
    },
    // 批量删除
    batchRemoveBrand () {
      let ids = []
      let name = []
      this.multipleSelection.forEach(item => {
        ids.push(item.attrGroupId)
        name.push(item.attrGroupName)
      })
      this.remove(ids, name)
    },
    // 删除
    handleDelete (index, row) {
      let ids = [row.attrGroupId]
      let name = row.attrGroupName
      this.remove(ids, name)
    },

    remove (ids, name) {
      this.$confirm(`删除【${name}】分组, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/attrgroup/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getAttrGroupPageList(this.pageSize, this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 选择多选框时，显现删除按钮
    handleSelectionChange (val) {
      this.multipleSelectionFlag = true
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.multipleSelectionFlag = false
      }
    },

    // 分页
    handleSizeChange (size) {
      this.pageSize = size
      this.getAttrGroupPageList(this.pageSize, this.currentPage, this.input)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getAttrGroupPageList(this.pageSize, this.currentPage, this.input)
    },

    // 树形菜单点击事件，接受子组件的传值
    nodeClick (data, node, component) {
      if (node.level === 3) {
        this.catId = data.catId
        this.getAttrGroupPageList(this.pageSize, this.currentPage)
      }
    },

    // 获取组信息, 表格回显
    getAttrGroupPageList (size, page, input) {
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
        method: 'get',
        params: this.$http.adornParams({
          page: size,
          limit: page,
          input: input
        })
      }).then(({
        data
      }) => {
        this.total = data.data.total
        this.attrGroup = data.data.records
      })
    },

    // 添加或修改时，动态刷新表格
    getDataList () {
      this.getAttrGroupPageList(this.pageSize, this.currentPage)
    }
  },
  created () {
    this.getAttrGroupPageList(this.pageSize, this.currentPage)
  },
  components: {
    tree,
    AddOrUpdate,
    attrAndAttrgroupAssociation
  }
}
</script>
<style>
.searchInput {
  width: 35%;
  margin-right: 10px;
}

.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}

.delButton {
  background: #f4b1b6;
  color: #fff;
  font-size: 16px;
}

.table {
  width: 100%;
  margin-top: 15px;
}
</style>
